<template>
  <!-- 付款 -->
  <el-dialog
    title="挂账记录"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <div>
       <table class="table-box">
        <thead>
          <tr>
            <th>总金额</th>
            <th>变动前金额</th>
            <th>变动金额</th>
            <th>变动金额</th>
            <th>操作人</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.allAmount}}</td>
            <td>{{item.beforeAmount}}</td>
            <td>{{item.amount}}</td>
            <td>{{item.afterAmount}}</td>
            <td>{{item.hpMember.memberName}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onClose">确 定</el-button>
      <el-button :loading="btnLoading" @click="onClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Valid from "@/_js/validate.js";
export default {
  props: ["value","total","id"],
  data() {
    return {
      btnLoading: false,
      tabList:[]
    };
  },
  mounted() {
    let th = this;
    th.getRecord();
  },
  methods: {
    getRecord(){
      let th=this;
      th.$api.getReturnDiscountRecord({id:th.id}).then(res=>{
        if(res.executed){
          th.tabList=res.dataBody.list;
        }
      })
    },
    onOpen() {
      let th = this;
      th.$nextTick(function() {});
    },
    onClose() {
      let th = this;
      // th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  },
  components: {
  }
};
</script>
<style lang="scss" scoped>
.his_body {
  display: inline-block;
  width: 100%;
  background-color: #666 !important;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
.icon_money_box {
  display: inline-block;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
  .iconqian {
    color: #fff;
    font-size: 26px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
}
.total-money_box {
  color: #fff;
  p {
    opacity: 0.75;
  }
  h4 {
    font-size: 26px;
  }
}
.pay_label{
    width: 109px;
    display: inline-block;
    text-align: right;
}
.derate_box {
  background-color: #e4e7ea;
  margin-left: 120px;
  padding: 20px 20px 10px 0px;
  margin-bottom: 20px;
  display: inline-block;
}
</style>
